$dom-item-height: 30px;
$month-dom-height: 180px;
$day-dom-height: 320px;
$hour-dom-height: 460px;
$minute-dom-height: 600px;
$second-dom-height: 740px;

.com-calendar {
  width: 100%;
  overflow: hidden;
  height: 400px;
  position: relative;
}

.com-clock {
  height: 400px;
  width: 100%;
  position: relative;
  transform: scale(0.5, 0.5);
  transition-duration: 0s;

  .date-box {
    position: absolute;
    line-height: $dom-item-height;
    left: 50%;
    top: 50%;
    transition: all 0.5s ease-in-out;

    .date-item {
      position: absolute;
      width: 100%;
      left: 0;
      text-align: right;
    }

    .date-item-action {
      color: #316cff;
      font-weight: 999;
    }
  }

  .year {
    text-align: center;
    margin-top: -15px;
    width: 100px;
    margin-left: -50px;
    color: #316cff;
  }
  .month-dom {
    width: $month-dom-height;
    height: $month-dom-height;
    margin-left: -90px;
    margin-top: -90px;

    .month-item {
      top: 75px;
    }
  }
  .day-dom {
    width: $day-dom-height;
    height: $day-dom-height;
    margin-left: -160px;
    margin-top: -160px;
    line-height: $dom-item-height;

    .day-item {
      top: 145px;
    }
  }

  .hour-dom {
    width: $hour-dom-height;
    height: $hour-dom-height;
    margin-left: -230px;
    margin-top: -230px;
    line-height: $dom-item-height;

    .hour-item {
      top: 215px;
    }
  }

  .minute-dom {
    width: $minute-dom-height;
    height: $minute-dom-height;
    margin-left: -300px;
    margin-top: -300px;
    line-height: $dom-item-height;

    .minute-item {
      top: 285px;
    }
  }

  .second-dom {
    width: $second-dom-height;
    height: $second-dom-height;
    margin-left: -370px;
    margin-top: -370px;
    line-height: $dom-item-height;

    .second-item {
      top: 355px;
    }
  }
}
